<template>
    <div style="padding: 10px 15px;" id="product">
        <el-card>
            <el-form ref="form" :model="form" label-width="90px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="店铺">
                            <el-select v-model="form.storeId" clearable size="mini" style="width: 100%">
                                <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName"
                                    :value="item.storeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="类目">
                            <el-input v-model="form.item" size="mini" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生产状态">
                            <el-select v-model="form.prodStatus" clearable size="mini" style="width: 100%">
                                <el-option label="已接单" value="1"></el-option>
                                <el-option label="已完成" value="2"></el-option>
                                <el-option label="无状态" value="99"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="form.status" clearable size="mini" style="width: 100%">
                                <el-option label="待创建" value="待创建"></el-option>
                                <el-option label="待发货" value="待发货"></el-option>
                                <el-option label="已送货" value="已送货"></el-option>
                                <el-option label="已入库" value="已入库"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="SKU ID">
                            <el-input v-model="form.skuId" size="mini" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="SKC ID">
                            <el-input v-model="form.skcId" size="mini" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备货单号">
                            <el-input v-model="form.stocklistNo" size="mini" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备货单类型">
                            <el-select v-model="form.stocklistType" clearable size="mini" style="width: 100%">
                                <el-option label="普通备货单" value="普通备货单"></el-option>
                                <el-option label="紧急备货单" value="紧急备货单"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="质检结果">
                            <el-select v-model="form.qcResult" clearable size="mini" style="width: 100%">
                                <el-option label="合格" value="合格"></el-option>
                                <el-option label="不合格" value="不合格"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发货时间">
                            <el-date-picker v-model="form.deStartTime" type="date" placeholder="开始日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                            <el-date-picker v-model="form.deEndTime" type="date" placeholder="截止日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备货单创建时间" label-width="120px">
                            <el-date-picker v-model="form.stocklistStartTime" type="date" placeholder="开始日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                            <el-date-picker v-model="form.stocklistEndTime" type="date" placeholder="截止日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="handleClickSearch">查询</el-button>
                            <el-button type="primary" size="mini" @click="handleClickExport">导出Excel</el-button>
                            <el-button type="primary" size="mini" @click="handleClickExportPro">导出生产单PDF</el-button>
                            <el-button type="primary" size="mini" @click="handleClickProdStatusMul">批量修改生产状态</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card>
            <div class="table-container">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">当前页全选</el-checkbox>
                <div style="margin: 15px 10px;"></div>
                <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
                    <el-card v-for="item, index in data" :key="index" class="cardBox">
                        <div slot="header" class="clearfix">
                            <el-checkbox :key="item.stocklistNo" :label="item" style="margin-right:10px"></el-checkbox>
                            <span style="font-weight: 600;">{{ item.stocklistType }}</span>
                            <span style="margin-left: 20px;">{{ "(" + item.storeName + ")" }}</span>
                            <el-button @click="handleClickPrint" style="float: right" size="mini"
                                type="primary">打印商品条码</el-button>
                            <el-button @click="handleClickRemark(item.stocklistNo)"
                                style="float: right;margin-right:10px" size="mini" type="primary">备注</el-button>
                            <el-button @click="handleClickImage(item.stocklistNo, item.skcId)"
                                style="float: right;margin-right:10px" size="mini" type="primary">相关图纸</el-button>
                            <!-- <el-button @click="handleClickPlantId(item.stocklistNo, item.plantId)"
                            style="float: right;margin-right:10px" size="mini" type="primary">修改厂内ID</el-button> -->
                            <el-button @click="handleClickProdStatus(item.stocklistNo, item.prodStatus)"
                                style="float: right;margin-right:10px" size="mini" type="primary">修改生产状态</el-button>
                        </div>
                        <div style="display: flex;">
                            <div style="display: flex;flex-direction: column">
                                <el-image style="width: 100px; height: 100px" :src="item.prodPictureUrl"
                                    :preview-src-list="[item.prodPictureUrl]" fit="fit"></el-image>
                                <span>￥{{ item.cny }}</span>
                            </div>
                            <div
                                style="display: flex;width: 30%;flex-direction: column;padding: 0px 10px;font-size: 14px;border-right: 1px solid #eee;">
                                <div style="text-align: center;font-weight: 600;">商品信息</div>
                                <div><span style="font-weight: 600;">备货单：</span>{{ item.stocklistNo }}</div>
                                <div><span style="font-weight: 600;">Skc Id：</span>{{ item.skcId }}</div>
                                <div><span style="font-weight: 600;">Sku Id：</span>{{ item.skuId }}</div>
                                <!-- <div><span style="font-weight: 600;">厂内ID：</span>{{ item.plantId }}</div> -->
                                <div><span style="font-weight: 600;">品类：</span>{{ item.proClassify }}</div>
                                <div><span style="font-weight: 600;">类目：</span>{{ item.item }}</div>
                                <div>
                                    <span style="font-weight: 600;">状态：</span>
                                    <el-tag v-if="item.status" size="mini" type="warning">{{
                item.status
            }}</el-tag>
                                </div>
                                <div>
                                    <span style="font-weight: 600;">生产状态：</span>
                                    <el-tag v-if="item.prodStatus == '2'" size="mini" type="success">已完成</el-tag>
                                    <el-tag v-if="item.prodStatus == '1'" size="mini" type="warning">已接单</el-tag>
                                </div>
                                <div>
                                    <span style="font-weight: 600;">质检结果：</span>
                                    <el-tag v-if="item.qcResult == '合格'" size="mini" type="success">{{
                item.qcResult
            }}</el-tag>
                                    <el-tag v-if="item.qcResult == '不合格'" size="mini" type="danger">{{
                item.qcResult
            }}</el-tag>
                                </div>
                                <div v-if="item.remark"><span style="font-weight: 600;">备注：</span>{{ item.memo }}</div>
                            </div>
                            <div
                                style="display: flex;width: 30%;flex-direction: column;padding: 0px 20px;font-size: 14px;border-right: 1px solid #eee;">
                                <div style="text-align: center;font-weight: 600;">备货数量</div>
                                <div><span style="font-weight: 600;">备货数量：</span>{{ item.sumStockupNo }}</div>
                                <div><span style="font-weight: 600;">交货数量：</span>{{ item.sumDeliEntryNo.split('/')[0] }}
                                </div>
                                <div><span style="font-weight: 600;">实收数量：</span>{{ item.sumDeliEntryNo.split('/')[1] }}
                                </div>
                                <div><span style="font-weight: 600;">次品与丢货量：</span>{{
                Number(item.sumDeliEntryNo.split('/')[0]) -
                Number(item.sumDeliEntryNo.split('/')[1]) }}
                                </div>
                            </div>
                            <div
                                style="display: flex;width: 30%;flex-direction: column;padding: 0px 20px;font-size: 14px;">
                                <div style="text-align: center;font-weight: 600;">发货信息</div>
                                <div><span style="font-weight: 600;">下单时间：</span>{{ item.stocklistCreatetime }}</div>
                                <div><span style="font-weight: 600;">需发货时间：</span>{{ item.reqDeliverTime }}</div>
                                <div><span style="font-weight: 600;">发货时间：</span>{{ item.deliverTime }}</div>
                                <div><span style="font-weight: 600;">发货单号：</span>{{ item.deliverNo }}</div>
                                <div><span style="font-weight: 600;">收货时间：</span>{{ item.receivedTime }}</div>
                                <div><span style="font-weight: 600;">收货仓库：</span>{{ item.receivedWarehouse }}</div>
                            </div>
                        </div>
                    </el-card>
                </el-checkbox-group>

            </div>
            <el-pagination background :current-page.sync="pagination.current" @size-change="handleSizeChange"
                :page-sizes="[20, 40, 60, 100, 150, 200]" :page-size="pagination.pageSize"
                @current-change="handleCurrentChange" layout="total, sizes, next, pager, prev"
                :total="pagination.total">
            </el-pagination>
        </el-card>

        <!-- 导出数据 -->
        <el-dialog title="导出数据" :visible.sync="dialogVisibleExport" width="70%" :close-on-click-modal="false">
            <el-form ref="exportForm" :model="exportForm" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="店铺">
                            <el-select v-model="exportForm.storeId" clearable size="mini" style="width: 100%">
                                <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName"
                                    :value="item.storeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备货单号">
                            <el-input v-model="exportForm.stocklistNo" size="mini" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发货时间">
                            <el-date-picker v-model="exportForm.deStartTime" type="date" placeholder="开始日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                            <el-date-picker v-model="exportForm.deEndTime" type="date" placeholder="截止日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备货单创建时间" label-width="120px">
                            <el-date-picker v-model="exportForm.stocklistStartTime" type="date" placeholder="开始日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                            <el-date-picker v-model="exportForm.stocklistEndTime" type="date" placeholder="截止日期"
                                value-format="yyyyMMdd" style="width:50%" size="mini">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="handleClickExportConfirm">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 添加备注 -->
        <el-dialog title="添加备注" :visible.sync="dialogVisibleRemark" width="50%" :close-on-click-modal="false">
            <el-row>
                <el-col :span="24">
                    <el-input type="textarea" :rows="2" v-model="remark" size="small" clearable></el-input>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-top: 10px;">
                <el-button type="primary" size="small" class="cus-submit-btn" native-type="submit"
                    @click.native.prevent="handleInputRemark">确认</el-button>
            </div>
        </el-dialog>

        <!-- 修改厂内ID -->
        <el-dialog title="修改厂内ID" :visible.sync="dialogVisiblePlantId" width="40%" :close-on-click-modal="false">
            <el-row>
                <el-col :span="18">
                    <el-input v-model="plantId" size="small" clearable></el-input>
                </el-col>
            </el-row>
            <div style="text-align: left;margin-top: 10px;">
                <el-button type="primary" size="small" class="cus-submit-btn" native-type="submit"
                    @click.native.prevent="handleInputPlantId">确认</el-button>
            </div>
        </el-dialog>

        <!-- 修改生产状态 -->
        <el-dialog title="修改生产状态" :visible.sync="dialogVisibleprodStatus" width="40%" :close-on-click-modal="false">
            <el-row>
                <el-col :span="18">
                    <el-select v-model="prodStatus" clearable size="small" style="width: 100%">
                        <el-option label="已接单" value="1"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <div style="text-align: left;margin-top: 10px;">
                <el-button type="primary" size="small" class="cus-submit-btn" native-type="submit"
                    @click.native.prevent="handleInputProdStatus">确认</el-button>
            </div>
        </el-dialog>

        <!-- 相关图片 -->
        <el-dialog title="相关图片" :visible.sync="dialogVisibleImage" width="50%" :close-on-click-modal="false">
            <p style="margin-bottom: 10px;color: red;">*点击文件名下载图片</p>
            <div style="display: flex;flex-direction:column">
                <ul>
                    <li class="fileImage" v-for="item in imageList" @click="downloadImage(item.filename, item.skcId)"
                        :key="item.id" style="line-height: 22px;cursor: pointer;">{{ item.filename }}</li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import API from "../../api";
export default {
    name: 'StockManagementInfo',
    data() {
        return {
            dataLoading: false,
            checkAll: false,
            isIndeterminate: true,
            checkedList: [],
            data: [],
            storeList: [],
            form: {
                deEndTime: "",
                deStartTime: "",
                item: "",
                prodStatus: "",
                qcResult: "",
                skcId: "",
                skuId: "",
                status: "",
                stocklistEndTime: "",
                stocklistNo: "",
                stocklistStartTime: "",
                stocklistType: "",
                storeId: ""
            },
            exportForm: {
                deEndTime: "",
                deStartTime: "",
                stocklistEndTime: "",
                stocklistNo: "",
                stocklistStartTime: "",
                storeId: ""
            },
            rules: {
                storeName: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
            },
            rules_pwd: {
                storeName: [{ required: true, message: "请输入店铺名", trigger: "blur" }],
                phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
            },
            // 与pagination对齐
            pagination: {
                pageSize: 50,
                total: 0,
                current: 1,
            },
            imageList: [],
            stocklistNo_temp: "",
            remark: "",
            plantId: "",
            prodStatus: "",
            searchValue: '',
            dialogVisible: false,
            dialogVisibleRemark: false,
            dialogVisibleExport: false,
            dialogVisibleImage: false,
            dialogVisiblePlantId: false,
            dialogVisibleprodStatus: false,
        };
    },
    computed: {
    },
    mounted() {
        //查询店铺数据
        this.searchStoreData();
        if (this.$route.query.skcId) {
            this.form.skcId = this.$route.query.skcId;
        }
        // 查询商品数据
        this.searchData();
    },

    methods: {
        searchStoreData() {
            API.send("queryStore").then(async (res) => {
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.storeList = res.data;
            })
        },
        searchImageData(id) {
            API.send("findFilesBySkcId", { data: { skcId: id } }).then(async (res) => {
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    return;
                }
                this.imageList = res.data.fileList;
            })
        },
        searchData() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            this.form.deStartTime = this.form.deStartTime === null ? "" : this.form.deStartTime;
            this.form.deEndTime = this.form.deEndTime === null ? "" : this.form.deEndTime;
            this.form.stocklistStartTime = this.form.stocklistStartTime === null ? "" : this.form.stocklistStartTime;
            this.form.stocklistEndTime = this.form.stocklistEndTime === null ? "" : this.form.stocklistEndTime;
            const req = {
                data: {
                    ...this.form,
                    pageNum: this.pagination.current,
                    pageSize: this.pagination.pageSize
                }
            }
            API.send("getstockList", req).then(async (res) => {
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    loading.close();
                    return;
                }
                this.data = res.data.list;
                this.pagination.total = res.data.total;
                this.goTop();
                loading.close();
            })
        },
        handleDateChange(value) {
            if (value === null) {
                value = "";
            }
        },
        handleCheckAllChange(val) {
            if (val) {
                this.checkedList = [];
                this.data.forEach(item => {
                    this.checkedList.push(item);

                })
            } else {
                this.checkedList = [];
            }
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.data.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.data.length;
        },
        handleClickSearch() {
            this.searchData();
        },
        handleClickExportPro() {
            if (this.checkedList.length <= 0) {
                this.$confirm('当前没有勾选备货单，是否打印当前全部的备货单（数据量大会导致卡顿）?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.exportPDFByCondition();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            } else {
                this.exportPDF();
            }
        },
        exportPDF() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            let voList = [];
            this.checkedList.forEach((item, index) => {
                let obj = {
                    flowNo: index + 1,
                    picture: item.prodPictureUrl,
                    skcId: item.skcId,
                    skuId: item.skuId,
                    stockNum: item.sumStockupNo,
                    stockType: item.stocklistType,
                    stocklistNo: item.stocklistNo,
                    storeName: item.storeName,
                }
                voList.push(obj);
            })
            API.send("exportPdf", {
                data: {
                    voList: voList
                }
            }).then(async (res) => {
                loading.close();
                if (res.data.type == 'application/json') {
                    this.$message.error("导出失败！");
                } else {
                    const url = window.URL.createObjectURL(new Blob([res.data], {
                        type: 'application/pdf'
                    }));
                    window.open(url, '_blank')
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    a.download = "production_orders.pdf";
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }).catch((err) => {
                loading.close();
                console.log(err);
                this.$message.error("导出异常！");
            });
        },
        exportPDFByCondition() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            this.form.deStartTime = this.form.deStartTime === null ? "" : this.form.deStartTime;
            this.form.deEndTime = this.form.deEndTime === null ? "" : this.form.deEndTime;
            this.form.stocklistStartTime = this.form.stocklistStartTime === null ? "" : this.form.stocklistStartTime;
            this.form.stocklistEndTime = this.form.stocklistEndTime === null ? "" : this.form.stocklistEndTime;
            const req = {
                data: {
                    ...this.form
                }
            }
            API.send("generatePdfByCondition", req).then(async (res) => {
                loading.close();
                if (res.data.type == 'application/json') {
                    this.$message.error("导出失败！");
                } else {
                    const url = window.URL.createObjectURL(new Blob([res.data], {
                        type: 'application/pdf'
                    }));
                    window.open(url, '_blank')
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    a.download = "production_orders.pdf";
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }).catch((err) => {
                loading.close();
                console.log(err);
                this.$message.error("导出异常！");
            });
        },
        handleClickExport() {
            if (this.checkedList.length <= 0) {
                this.ExportByCondition();
            } else {
                this.handleClickExportConfirm();
            }
        },
        handleClickExportConfirm() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            let stockUpDTOList = [];
            this.checkedList.forEach((item, index) => {
                let obj = {
                    srlNo: index + 1,
                    deliNum: item.sumDeliEntryNo.split('/')[0],
                    deliverTime: item.deliverTime,
                    item: item.item,
                    proClassify: item.proClassify,
                    prodPictureUrl: item.prodPictureUrl,
                    skcId: item.skcId,
                    skuId: item.skuId,
                    stockupNum: item.sumStockupNo,
                    stocklistType: item.stocklistType,
                    stocklistNo: item.stocklistNo,
                    storeName: item.storeName,
                }
                stockUpDTOList.push(obj);
            })
            const req = {
                data: {
                    stockUpDTOList: stockUpDTOList
                }
            }
            API.send("exportStockExcel", req).then(async (res) => {
                loading.close();
                if (res.data.type == 'application/json') {
                    this.$message.error("下载失败！");
                } else {
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    a.download = "StockData.xls";
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }).catch((err) => {
                loading.close();
                console.log(err);
                this.$message.error("导出异常！");
            });
        },
        ExportByCondition() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            this.form.deStartTime = this.form.deStartTime === null ? "" : this.form.deStartTime;
            this.form.deEndTime = this.form.deEndTime === null ? "" : this.form.deEndTime;
            this.form.stocklistStartTime = this.form.stocklistStartTime === null ? "" : this.form.stocklistStartTime;
            this.form.stocklistEndTime = this.form.stocklistEndTime === null ? "" : this.form.stocklistEndTime;
            const req = {
                data: {
                    ...this.form
                }
            }
            API.send("exportStockExcelByCondition", req).then(async (res) => {
                loading.close();
                if (res.data.type == 'application/json') {
                    this.$message.error("下载失败！");
                } else {
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    a.download = "StockData.xls";
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }).catch((err) => {
                loading.close();
                console.log(err);
                this.$message.error("导出异常！");
            });
        },
        handleClickPrint() {
            window.open('https://seller.kuajingmaihuo.com/main/order-manage-urgency');
        },
        handleClickRemark(id) {
            this.dialogVisibleRemark = true;
            this.stocklistNo_temp = id;
        },
        handleClickImage(id, skc) {
            this.dialogVisibleImage = true;
            this.searchImageData(skc);
            this.stocklistNo_temp = id;
        },
        handleClickPlantId(id, plantId) {
            this.dialogVisiblePlantId = true;
            this.plantId = plantId;
            this.stocklistNo_temp = id;
        },
        handleClickProdStatus(id, prodStatus) {
            this.dialogVisibleprodStatus = true;
            this.prodStatus = prodStatus;
            this.stocklistNo_temp = [id];
        },
        handleClickProdStatusMul() {
            if (this.checkedList.length <= 0) {
                this.$message.error("请选择备货单！");
                return;
            }
            this.dialogVisibleprodStatus = true;
            this.prodStatus = "";
            this.stocklistNo_temp = [];
            this.checkedList.forEach(item => {
                this.stocklistNo_temp.push(item.stocklistNo);
            })
        },
        downloadImage(filename, skcId) {
            const req = {
                data: {
                    filename: filename,
                    skcId: skcId
                }
            }
            API.send("downloadFile", req).then(async (res) => {
                if (res.data.type == 'application/json') {
                    this.$message.error("下载失败！");
                } else {
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }).catch((err) => {
                console.log(err);
                this.$message.error("下载失败！");
            });
        },
        handleInputRemark() {
            this.$confirm('确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t('loading.login'),
                    spinner: 'el-icon-loading',
                });
                API.send("addStockRemark", {
                    data: {
                        remark: this.remark,
                        stocklistNo: this.stocklistNo_temp
                    }
                }).then(async (res) => {
                    if (res.code !== 200) {
                        this.$message({
                            type: 'error',
                            message: '添加失败!'
                        });
                        loading.close();
                        return;
                    }
                    this.searchData();
                    this.remark = "";
                    this.dialogVisibleRemark = false;
                    loading.close();
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleInputPlantId() {
            this.$confirm('确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t('loading.login'),
                    spinner: 'el-icon-loading',
                });
                API.send("modifyPlantId", {
                    data: {
                        plantId: this.plantId,
                        stocklistNo: this.stocklistNo_temp
                    }
                }).then(async (res) => {
                    if (res.code !== 200) {
                        this.$message({
                            type: 'error',
                            message: '修改失败!'
                        });
                        loading.close();
                        return;
                    }
                    this.searchData();
                    this.plantId = "";
                    this.dialogVisiblePlantId = false;
                    loading.close();
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleInputProdStatus() {
            this.$confirm('确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t('loading.login'),
                    spinner: 'el-icon-loading',
                });
                API.send("modifyProdStatus", {
                    data: {
                        prodStatus: this.prodStatus,
                        stocklistNo: this.stocklistNo_temp
                    }
                }).then(async (res) => {
                    if (res.code !== 200) {
                        this.$message({
                            type: 'error',
                            message: '修改失败!'
                        });
                        loading.close();
                        return;
                    }
                    this.searchData();
                    this.prodStatus = "";
                    this.dialogVisibleprodStatus = false;
                    loading.close();
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.searchData();
        },
        handleCurrentChange(val) {
            this.pagination.current = val;
            this.searchData();
        },
        //点击置顶
        goTop() {
            const scrollEle = document.querySelector('#product');
            scrollEle.scrollIntoView({ behavior: "smooth" })
        }
    },
};
</script>

<style lang="scss" scoped>
#product {
    position: relative;
}

.payment-col {
    display: flex;

    .trend-container {
        display: flex;
        align-items: center;
        margin-left: 8px;
    }
}

.table-container {
    padding-block: 10px;
}

.left-operation-container {
    padding: 0 0 6px 0;
    margin-bottom: 16px;

    .selected-count {
        display: inline-block;
        margin-left: 10px;
    }
}

.cardBox:hover {
    transform: scale(1.02, 1.02);
}

.search-input {
    width: 360px;
    margin-top: 16px;
}

.fileImage:hover {
    text-decoration: underline;
}

.clearfix {
    ::v-deep .el-checkbox__label {
        display: none;
    }
}

::v-deep .el-card {
    font-size: 16px;
}

::v-deep .el-card__header {
    padding: 8px 20px;
}

::v-deep .el-dialog__body {
    padding: 20px 20px;
}

::v-deep .el-card__body {
    padding: 10px 20px;
}

::v-deep .el-form-item {
    margin-bottom: 0px;
}

::v-deep .el-pagination {
    .el-pagination__total {
        float: left;
    }

    .btn-prev,
    .el-pager,
    .btn-next {
        float: right;
    }
}
</style>
